;(function () {


    const template = `   <!--右边主页面区域: 分上下两个区域-->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <!--右边上半区域-->
<!--                <h1 class="page-header">Dashboard</h1>-->
                    <slot name="dashboard"></slot>
                <!--通过自定义事件实现删除功能
                    @自定义事件名称= 事件监听函数
                    在子组件 dashboard 中触发 delete_hobby 事件来调用 deleteHobby 函数
                    自定义事件 只能用子组件调用父组件中的方法，不能用于其他关系的组件
                -->
                <dashboard :hobbies="hobbies" @delete_hobby="deleteHobby"></dashboard>
                <!--右边下半区域-->
                <h2 class="sub-header">Section title</h2>
                <home-list :empList="empList" :deleteEmp="deleteEmp"></home-list>
            </div>`;

    window.AppHome = {
        template,
        components: {
            Dashboard,
            HomeList
        },
        data() {
            return {
                hobbies: ['看书', '台球', '睡觉', '撸代码'],
                empList: [
                    {id: 1, name: '小梦1', salary: 80001},
                    {id: 2, name: '小梦2', salary: 80002},
                    {id: 3, name: '小梦3', salary: 80003},
                    {id: 4, name: '小梦4', salary: 80004}
                ]
            }
        },
        methods: {
            //  删除指定的下标数据，因为删除emp 会对empList 进行更新操作，而empList 是初始化在当前这个组件里，所以删除的函数要定义在这个组件中
            deleteEmp(index) {
                this.empList.splice(index, 1);
            },
            deleteHobby(index) {
                this.hobbies.splice(index, 1);
            }
        }
    }

})();
